<template>
    <div class="bar" id="bar" style="width:737px;height:183px"></div>
</template>
<script>
export default {
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      const chart = this.$echarts.init(document.getElementById('bar'));
      const option = {
        title: {
          text: '不同规模客户订单类别统计',
          left: '0',
          textStyle: {
            color: 'rgb(85, 85, 85)',
            fontSize: 14,
            fontWeight: 400
          }
        },
        legend: { x: 'center', y: 'bottom' },
        tooltip: {},
        dataset: {
          dimensions: ['product', '个人', '中小企业', '大型企业'],
          source: [
            { product: '办公用品', 个人: 90.3, 中小企业: 85.8, 大型企业: 93.7 },
            { product: '家居', 个人: 83.1, 中小企业: 63.4, 大型企业: 55.1 },
            { product: '电器', 个人: 86.4, 中小企业: 65.2, 大型企业: 82.5 },
            { product: '服装', 个人: 72.4, 中小企业: 53.9, 大型企业: 39.1 }
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{
          type: 'bar',
          barMaxWidth: 15,
          itemStyle: {
            color: 'rgb(155, 139, 186)'
          }
        }, {
          type: 'bar',
          barMaxWidth: 15,
          itemStyle: {
            color: 'rgb(224, 152, 199)'
          }
        }, {
          type: 'bar',
          barMaxWidth: 15,
          itemStyle: {
            color: 'rgb(143, 211, 232)'
          }
        }]
      };

      option && chart.setOption(option);
    }
  }
}
</script>